<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { getCurrentInstance, showLoading } from '@tarojs/taro';
import { RUN_STATE_QUERY } from '/@/api/modules/base/device-detail';
/**
 * 设备运行状态
 */
const runState = reactive<{
  properties: AppSysDevice.PropertiesDto[];
}>({
  properties: [],
});

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  deviceId?: string;
};

/**
 * 设备运行状态
 */
function runStateQuery() {
  if (!params.deviceId) {
    return;
  }
  showLoading();
  RUN_STATE_QUERY({ deviceId: params.deviceId }).then((res) => {
    runState.properties = res.properties || [];
  });
}

onMounted(() => {
  runStateQuery();
});
</script>
<template>
  <view class="device-detail__wrapper">
    <nut-grid :gutter="10" :column-num="2" :center="false" :border="false">
      <nut-grid-item v-for="property in runState.properties">
        <view class="device-detail__grid-item-status">{{ property.name }}</view>
        <view class="device-detail__grid-item-online">{{ property.value }}</view>
        <view class="device-detail__grid-item-time">{{ property.timeDesc }}</view>
      </nut-grid-item>
    </nut-grid>
  </view>
</template>
<style lang="scss">
.device-detail {
  &__wrapper {
    margin: 20px 20px 80px;
    background-color: #fff;
    border-radius: 16px;
  }
  &__grid-item-status {
    font-size: 26px;
    color: #666;
  }
  &__grid-item-online {
    font-size: 34px;
    color: #333;
  }

  &__grid-item-time {
    font-size: 18px;
    color: #999;
  }
}
</style>
